<template>
	<view style="background-color: #e1e1e1; padding: 5px;">
		<view>
			<view v-for="(item,index) in words" style="display:flex;background-color: #FFF; margin: 10px 10px; border-radius: 5px; height:80px;" @click="playVoice(index,item)">
				<view style="flex: 1; padding: 10px 10px;">
					<view style="font-size: 16px;height:20px;line-height: 15px; font-weight: bold; display: flex;">
						{{item.english}} <span style="margin: 0px 6px;"><u-icon name="volume" ></u-icon></span>
					</view>
					<view style="height: 25px; color: #909090;">
						[]
					</view>
					<view style="color: #909090;">
						{{item.chinese}}
					</view>
				</view>
				<view style="margin:5px;">
					词意图片
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				innerAudioContext:null,
				words:[
					{id:1,english:'good',yinbiao:"[gu:d]",chinese:'好的',audio:'',thumb:'',playing:false},
					{id:1,english:'pen',yinbiao:"[gu:d]",chinese:'钢笔 ',audio:'',thumb:'',playing:false},
					{id:1,english:'Good morning',yinbiao:"[gu:d]",chinese:'早上好',audio:'',thumb:'',playing:false},
					{id:1,english:'hi',yinbiao:"[gu:d]",chinese:'嗨，喂',audio:'',thumb:'',playing:false},
					{id:1,english:'ruler',chinese:'尺子',audio:'',thumb:'',playing:false},
					{id:1,english:'sharpener',chinese:'卷笔刀',audio:'',thumb:'',playing:false},
					{id:1,english:'Good morning',chinese:'早上好',audio:'',thumb:'',playing:false},
					{id:1,english:'hi',chinese:'嗨，喂',audio:'',thumb:'',playing:false},
					{id:1,english:'black',chinese:'黑色的',audio:'',thumb:'',playing:false},
					{id:1,english:'When we were children',chinese:'嗨，喂',audio:'',thumb:'',playing:false},
					{id:1,english:'Good morning',chinese:'早上好',audio:'',thumb:'',playing:false},
					{id:1,english:'hi',chinese:'嗨，喂',audio:'',thumb:'',playing:false},
				]
			}
		},
		mounted() {
			this.innerAudioContext=uni.createInnerAudioContext();
		},
		methods: {
			playVoice(index,data){

				this.innerAudioContext.autoplay = true;
				// http://dict.youdao.com/dictvoice?type=0&audio=' + key; key 是需要发音的单词，链接就是有道词典的接口链接，返回就是一个音频，直接可以播放，可以直接在游览器打开。
				this.innerAudioContext.src = 'http://dict.youdao.com/dictvoice?type=0&audio=' + data.english;
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
					uni.hideLoading();
				});
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
 			}
		}
	}
</script>

<style>

</style>
